<template>
  <div class="container-lg">
    <div class="row">
      <div class="col">
        <h4>测试点贡献查询</h4>
        <!-- <el-form :model="form1" label-width="120px">
          <el-form-item label="用户">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-form> -->
      </div>
    </div>
    <div class="row">
      <div class="col">
        已提交题目数：
        <span>{{ uniq(tableData.map((n) => n.questionid)).length }}</span>
      </div>
    </div>
    <div class="row">
      <div class="col">
        已提交测试点数：<span>{{ tableData.length }}</span>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <table class="table">
          <thead>
            <tr>
              <th scope="col">提交题目</th>
              <th scope="col">输入</th>
              <th scope="col">输出</th>
              <th scope="col">备注</th>

              <th scope="col">审核状态</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(data, i) in tableData" :key="i">
              <td>{{ data.question ? data.question.name : "" }}</td>
              <td>
                <a v-if="data.type === 'url'" :href="data.input" target="_blank"
                  >下载</a
                >
                <pre v-else v-text="data.input"></pre>
              </td>
              <td>
                <a
                  v-if="data.type === 'url'"
                  :href="data.output"
                  target="_blank"
                  >下载</a
                >
                <pre v-else v-text="data.output"></pre>
              </td>
              <td>{{ data.context }}</td>
              <td>{{ ["未处理", "已使用", "已拒绝"][data.isuse] }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { asyncselectquestiontestcasesuser } from "../../../api";
import { Storekey } from "../../../interface";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import { computed, defineComponent, onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { uniq } from "underscore";
export default defineComponent({
  setup() {
    const store = useStore(Storekey);
    const user = computed(() => {
      return store.state.user;
    });
    const route = useRoute();
    const router = useRouter();

    const order = computed<any>(() => {
      return roue.value.order;
    });
    const offset = computed(() => {
      return Number(roue.value.offset);
    });
    const limit = computed(() => {
      return Number(roue.value.limit);
    });
    const roue = computed(() => {
      return route.query;
    });
    const tableData = ref<Studycodemodel.Iquestiontestcasesuser[]>([]);
    const form1 = reactive<Studycodemodel.Iquestiontestcasesuser>({
      userid: store.state.user?.ID,
    });
    onMounted(() => {
      start();
    });

    async function start() {
      if (store.state.user?.ID) {
        const data = await asyncselectquestiontestcasesuser({
          userid: store.state.user?.ID,
        });
        tableData.value = data.rows;
      }
    }

    return {
      form1,
      uniq,
      tableData,
    };
  },
});
</script>


<style scoped>
.container-lg {
  margin-top: 24px;
  background-color: #fff;
  padding: 24px;
}
.table {
  margin-top: 24px;
  margin-bottom: 24px;
}
</style>
